/*
 * @Author: huazite 
 * @Date: 2019-01-19 09:59:35 
 * @Last Modified by: huazite
 * @Last Modified time: 2019-01-19 11:00:24
 * @注释：此配置为【发布阶段】的配置文件
 */

const path = require('path')
const Webpack = require('webpack')
//导入 html-webpack-plugin ：可以在内存中生成html页面
// 自动在内存中生成html页面；
//自动把内存中打包好的bundle.js添加到内存中html页面中引用
const HtmlWebpackPlugin = require('html-webpack-plugin')

//导入每次删除[dist]文件夹的插件
const CleanWebpackPlugin = require('clean-webpack-plugin')

// 导入抽取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 导入压缩css的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')


//这个配置文件，通过nodeJs中的模块操作，向外暴露了一个配置对象
module.exports = {
    //入口，表示 webpack 要打包哪个文件
    entry:{
        app: path.join(__dirname, './src/main.js'),
        //需要抽离的第三方插件名称
        vendors: ['jquery']
    },
    //输出文件相关配置
    output: {
        //指定输出的路径
        path: path.join(__dirname, './dist'),
        //指定输出文件的名称
        filename: 'js/bundle.js'
    },

    plugins:[ // 配置插件的节点
        //new webpack.HotModuleReplacementPlugin(), //启用热更新第三步， 新建一个热更新模块对象

        new HtmlWebpackPlugin({ // 创建一个在内存中生成html的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html', // 指定生成页面的名称
            minify: { //压缩 html 页面
                collapseWhitespace: true, //合并多余的空格
                removeComments: true, //移除注释
                removeAttributeQuotes: true, //移除 属性上的双引号
            }
        }),
        //把需要删除的文件目录（路径），以数组方式传入
        new CleanWebpackPlugin(['dist']),
        //webpack优化抽离发布
        new Webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', //指定要抽离的入口名称
            filename: 'js/vendors.js', //表示将来发布时，除了 bundle.js,还会把第三包打包到 vendors.js 中
        }),
        //webpack优化 压缩js 发布
        new Webpack.optimize.UglifyJsPlugin({
            compress: { //配置压缩选项
                warnings: false, //移除警告
            }
        }),
        new Webpack.optimize.DedupePlugin({ //设置为 产品上线环境， 进一步压缩js代码
            'process.env.NODE_ENV': '"production"'
        }),
        //抽取 css文件
        new ExtractTextPlugin('css/styles.css'),
        //压缩css
        new OptimizeCssAssetsPlugin()
    ],

    module: { //用于配置所有第三方模块加载器
        rules: [ // 所有第三方模块的匹配规则
            {//配置处理 .css 文件的第三方loader规则
                test: /\.css$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                    publicPath: '../', //指定抽取的时候自动 添加相对路径
                })
            }, 
            {//配置处理 .less 文件的第三方loader规则
                test: /\.less$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader'],
                    publicPath: '../', //指定抽取的时候自动 添加相对路径
                })
            }, 
            {//配置处理 .scss 文件的第三方loader规则
                test: /\.scss$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader'],
                    publicPath: '../', //指定抽取的时候自动 添加相对路径
                })
            }, 
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=43524&name=imgs/[hash:8]-[name].[ext]'}, //配置处理 请求url文件的第三方loader规则。
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, //配置处理 请求字体文件的第三方loader规则。
            /**
             * 通过？来传参数:
             * limit(最大值) =》小于最大值进行转base64. 
             * imgs/name=[name].[ext] 表示文件放在[imgs]目录下，并且名字跟之前名字相同,后缀名也相同
             * [hash:8] 表示自动设置前8位哈希值
             */
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, //配置处理 .js 文件的第三方loader规则。把ES6等高级语法转换为可识别低级语法。
            /**
             * 通过 exclude 来排除不需要转换的目录。
             */
            {test: /\.vue$/, use: 'vue-loader'}, //配置处理 .vue 文件的第三方loader规则
        ]
    }
}

/**
 * 使用 clean-webpack-plugin 这个工具，来实现每次发布前，都把[dist]目录下文件删除
 *  1、 npm i clean-webpack-plugin -D 安装工具到本地开发环境内
 */

 /**
  * 使用 extract-text-webpack-plugin 插件， 来实现 抽离css文件
  * 1、 npm i extract-text-webpack-plugin -D 安装
  */
 
 /**
  * 使用 optimize-css-assets-webpack-plugin@3.2.0 插件， 来实现 压缩css文件
  * 1、 npm i optimize-css-assets-webpack-plugin@3.2.0 -D 安装
  */



